/**
 * 功能描述: 警告提醒样式表
 * @author 崔孝楠
 * @date 2022/10/6 17:16
 * @version 1.0
 */
@import '../../style/index';

// 提示框布局
@mixin  alert--layout {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  line-height: $line-height-base;
  list-style: none;
  box-sizing: border-box;
  margin: 0;
}

// 关闭图标布局
@mixin alert-close-icon--layout {
  margin-left: 8px;
  padding: 0;
  overflow: hidden;
  // 图标大小
  svg {
    width: 1em;
    height: 1em;
  }
}

// 有描述信息时提示框布局
@mixin alert-with-description--layout {
  align-items: flex-start;
  padding: 15px 15px 15px 24px;
  // 提醒图标
  @include b(alert-icon) {
    margin-right: 15px;
  }
  // 提醒文字
  @include b(alert-message) {
    display: block;
    margin-bottom: 4px;
  }
  // 提醒描述
  @include b(alert-description) {
    display: block;
  }
}

// 提醒描述文字布局
@mixin alert-description--layout {
  display: none;
  line-height: 22px;
}

// 顶部公告布局
@mixin alert-banner--layout {
  margin-bottom: 0;
}

// 提示框样式
@include b(alert) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  font-feature-settings: "tnum";
  word-wrap: break-word;
  border-radius: $border-radius-base;
  @include alert--layout;
}

// 成功提示框样式
@include b(alert-success) {
  background-color: $success-background-color;
  border: 1px solid $success-border-color;
  // 提醒图标颜色
  @include b(alert-icon) {
    color: $success-icon-color;
  }
}

// 信息提示框样式
@include b(alert-info) {
  background-color: $info-background-color;
  border: 1px solid $info-border-color;
  // 提醒图标颜色
  @include b(alert-icon) {
    color: $info-icon-color;
  }
}

// 警告提示框样式
@include b(alert-warning) {
  background-color: $warning-background-color;
  border: 1px solid $warning-border-color;
  // 提醒图标颜色
  @include b(alert-icon) {
    color: $warning-icon-color;
  }
}

// 错误提示框样式
@include b(alert-error) {
  background-color: $error-background-color;
  border: 1px solid $error-border-color;
  // 提醒图标颜色
  @include b(alert-icon) {
    color: $error-icon-color;
  }
}

// 提示内容布局
@include b(alert-content) {
  flex: 1;
  min-width: 0;
}

// 提示信息字体色
@include b(alert-message) {
  color: $color-text-primary;
}

// 关闭图标样式
@include b(alert-close-icon) {
  font-size: $font-size-extra-small;
  line-height: $font-size-extra-small;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: $close-icon-color;
  @include alert-close-icon--layout;
  // 悬浮时图标颜色
  svg {
    &:hover {
      color: $color-text-primary;
    }
  }
}

// 提醒图标布局
@include b(alert-icon) {
  margin-right: 8px;
  margin-bottom: 5px;
  width: 1em;
  height: 1em;
}

// 有描述信息时提示框样式
@include b(alert-with-description) {
  @include alert-with-description--layout;
  // 提醒图标
  @include b(alert-icon) {
    font-size: 24px;
  }
  // 提醒文字
  @include b(alert-message) {
    color: $color-text-primary;
    font-size: $font-size-medium;
  }
}

// 提醒描述文字样式
@include b(alert-description) {
  font-size: $font-size-base;
  @include alert-description--layout;
}

// 顶部公告样式
@include b(alert-banner) {
  border: 0;
  border-radius: 0;
  @include alert-banner--layout;
}
